<!DOCTYPE html>

<html>
    <head>

        <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
        <meta charset="utf-8"/>
        <meta content="initial-scale=1, width=device-width" name="viewport"/>

        <!-- http://getbootstrap.com/ -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <!-- app's own CSS -->
        <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet"/>

        <!-- https://developers.google.com/maps/documentation/javascript/ -->
        <script src="https://maps.googleapis.com/maps/api/js?key={{ key | urlencode }}&v=3.exp"></script>

        <!-- http://jquery.com/ -->
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>

        <!-- http://getbootstrap.com/ -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <!-- https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md -->
        <script src="https://cdn.rawgit.com/corejavascript/typeahead.js/master/dist/typeahead.jquery.js"></script>

        <!-- http://handlebarsjs.com/ -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
        
        <!-- http://stewartjpark.com/Flask-JSGlue/ -->
        {{ JSGlue.include() }}

        <!-- app's own JavaScript -->
        <script src="{{ url_for('static', filename='scripts.js') }}"></script>

        <title>Mashup</title>

    </head>
    <body>

        <!-- fill viewport -->
        <div class="container-fluid">

            <!-- https://developers.google.com/maps/documentation/javascript/tutorial -->
            <div id="map-canvas"></div>

            <!-- http://getbootstrap.com/css/#forms -->
            <form id="form">
                <div class="form-group">
                    <label class="sr-only" for="q">City, State, Postal Code</label>
                    <input class="form-control" id="q" placeholder="City, State, Postal Code" type="text"/>
                </div>
            </form>
        </div>

    </body>
</html>
